<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在线考试</title>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap-3.3.4.css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script src="../../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!--   引入核心js-->
    <script src="../../layui/layui.js"></script>
    <script>
        var HH = 0;//时
        var mm = 40;//分
        var ss = 0;//秒
        var timeState = true;//时间状态 默认为true 开启时间
        var questions = (function () {
            var result;
            $.ajax({
                type: 'get',
                url: '/student/select',
                dataType: 'json',
                async: false,
                success: function (data) {
                    result = data;
                }
            });
            return result;
        })();
        console.log(questions);
        var itemList = ["A", "B", "C", "D", "E", "F"]
        var itemList1 = ["0", "1"]
        var sum = questions[0].length + questions[1].length + questions[2].length + questions[3].length;
        var a = questions[0].length;
        var b = questions[0].length + questions[1].length;
        var c = questions[0].length + questions[1].length + questions[2].length;
        var activeQuestion = 0; //当前操作的考题编号
        var questioned = 0; //
        var checkQues = []; //已做答的题的集合
        /*实现计时器*/

        //     var time = 45 * 60;//剩余时间,单位秒
        //     var timeDiv = document.getElementById("time");
        //     var timeObj = null;
        //     function timer(){
        //     if(times == 0){
        //     //倒计时结束，提交表单
        //     document.getElementById("frm").submit();
        //     window.clearInterval(timeObj);
        //     return;
        // }
        //     var t = Math.floor(times/60) +"分"+times%60+"秒"
        //     timeDiv.innerHTML = t;
        //     times --;
        // }
        //     timeObj = window.setInterval(timer,1000);

        var time = setInterval(function () {
            if (timeState) {
                if (HH == 24) HH = 0;
                str = "";
                if (ss-- == 0) {
                    if (mm-- == 0) {
                        if (HH == 0) {
                            window.clearInterval(time);
                            timeover();
                        }
                        HH--;
                        mm = 59;
                    }
                    ss = 59;
                }
                str += HH < 10 ? "0" + HH : HH;
                str += ":";
                str += mm < 10 ? "0" + mm : mm;
                str += ":";
                str += ss < 10 ? "0" + ss : ss;
                $(".time").text(str);
            } else {
                $(".time").text(str);
            }
        }, 1000);

        //展示考卷信息

        function showQuestion(id) {

            $(".questioned").text(id + 1);
            questioned = (id + 1) / sum;
            if (activeQuestion != undefined) {
                $("#ques" + activeQuestion).removeClass("question_id").addClass("active_question_id");
            }
            subid = null;
            chid = null;
            qno = null;
            activeQuestion = id;
            $(".question").find(".question_info").remove();
            if (id < a) {
                console.log(id);
                var question = questions[0][id];
                chid = question.chid;
                $(".question_title").html("<strong>第 " + (id + 1) + " 题 、</strong>" + question.chquestion);
                item = "<li class='question_info' onclick='clickTrim(this)' id='item"
                    + 0 + "'><input type='radio' name='item' value='" + itemList[0] + "'>&nbsp;" + question.chquestiona + "</li>";
                $(".question").append(item);
                item = "<li class='question_info' onclick='clickTrim(this)' id='item"
                    + 1 + "'><input type='radio' name='item' value='" + itemList[1] + "'>&nbsp;" + question.chquestionb + "</li>";
                $(".question").append(item);
                item = "<li class='question_info' onclick='clickTrim(this)' id='item"
                    + 2 + "'><input type='radio' name='item' value='" + itemList[2] + "'>&nbsp;" + question.chquestionc + "</li>";
                $(".question").append(item);
                item = "<li class='question_info' onclick='clickTrim(this)' id='item"
                    + 3 + "'><input type='radio' name='item' value='" + itemList[3] + "'>&nbsp;" + question.chquestiond + "</li>";
                $(".question").append(item);

            } else if (id >= a && id < b) {
                console.log(id);
                var question = questions[1][id - a];
                qno = question.qno;
                $(".question_title").html("<strong>第 " + (id + 1) + " 题 、</strong>" + question.question);
                item = "<li class='question_info'  style=\"margin-top:50px\"onclick='clickTrim(this)' id='item"
                    + 0 + "'><input type='radio' name='item' value='" + itemList1[0] + "'>&nbsp;" + "." + "对" + "</li>";
                $(".question").append(item);
                item = "<li class='question_info'onclick='clickTrim(this)' id='item"
                    + "'><input type='radio' name='item' value='" + itemList1[1] + "'>&nbsp;" + "." + "错" + "</li>";
                $(".question").append(item);
            } else if (id >= b && id < c) {
                console.log(id);
                var question = questions[2][id - b];
                $(".question").find(".question_info").remove();
                qno = question.qno;
                $(".question_title").html("<strong>第 " + (id + 1) + " 题 、</strong>" + question.question);
                item = "<li class='question_info'id='item"
                    + 0 + "'><input type='text' id='id1' name='item' value=''style=\"width:610px;height:50px ;margin-top:-5px;margin-left:-25px\"></li>";
                $(".question").append(item);
                //
            } else if (id >= c && id < sum) {
                console.log(id);
                var question = questions[3][id - c];
                subid = question.subid;
                $(".question_title").html("<strong>第 " + (id + 1) + " 题 、</strong>" + question.subquestion);
                item = "<li class='question_info'id='item"
                    + 0 + "'><input type='text' id='id1' name='item' value='' style=\"width:610px;height:70px ;margin-top:-5px;margin-left:-25px\"></li>";
                $(".question").append(item);
            }

            $(".question").attr("id", "question" + id);
            $("#ques" + id).removeClass("active_question_id").addClass("question_id");
            for (var i = 0; i < checkQues.length; i++) {
                if (checkQues[i].id == id) {
                    $("#" + checkQues[i].item).find("input").prop("checked", "checked");
                    $("#" + checkQues[i].item).addClass("clickTrim");
                    $("#ques" + activeQuestion).removeClass("question_id").addClass("clickQue");
                }
            }
            progress();
        }

        /*答题卡*/
        function answerCard() {
            $(".question_sum").text(sum);
            for (var i = 0; i < sum; i++) {
                var questionId = "<li id='ques" + i + "'onclick='saveQuestionState(" + i + ")' class='questionId'>" + (i + 1) + "</li>";
                $("#answerCard ul").append(questionId);
            }
        }

        function timeover() {
            alert("已自动交卷，考试结束！   已做答:" + ($(".clickQue").length) + "道题,还有" + (sum - ($(".clickQue").length)) + "道题未完成");
            alert(JSON.stringify(checkQues));
            var index = parent.layer.getFrameIndex(window.name);
            setTimeout(function () {
                parent.layer.close(index)
            }, 1000);
        }

        /*选中考题*/
        var Question;

        function clickTrim(source) {
            var id = source.id;
            $("#" + id).find("input").prop("checked", "checked");
            $("#" + id).addClass("clickTrim");
            $("#ques" + activeQuestion).removeClass("question_id").addClass("clickQue");
            var ques = 0;
            var text = 1;
            for (var i = 0; i < checkQues.length; i++) {
                // console.log("checkQues[i].id======="+checkQues[i].id);
                // console.log("activeQuestion======="+activeQuestion);
                // console.log("checkQues[i].item======="+checkQues[i].item);
                // console.log("id======="+id);
                if (checkQues[i].id == activeQuestion && checkQues[i].item != id) {
                    text = 0;
                    ques = checkQues[i].id;
                    checkQues[i].item = id;//获取当前考题的选项ID
                    checkQues[i].answer = $("#" + id).find("input[name=item]:checked").val();//获取当前考题的选项值
                    if (chid != null) {
                        checkQues[i].chid = chid;
                    } else if (qno != null) {
                        checkQues[i].qno = qno;
                    }
                }
            }
            if (text) {
                if (checkQues.length == 0 || Question != activeQuestion && activeQuestion != ques) {
                    var check = {};
                    check.id = activeQuestion;//获取当前考题的编号
                    check.item = id;//获取当前考题的选项ID
                    check.answer = $("#" + id).find("input[name=item]:checked").val();//获取当前考题的选项值
                    if (chid != null) {
                        check.chid = chid;
                        checkQues.push(check);
                    } else if (qno != null) {
                        check.qno = qno;
                        checkQues.push(check);
                    }

                }
            }

            $(".question_info").each(function () {
                var otherId = $(this).attr("id");
                if (otherId != id) {
                    $("#" + otherId).find("input").prop("checked", false);
                    $("#" + otherId).removeClass("clickTrim");
                }
            })
            Question = activeQuestion;
        }

        /*设置进度条*/
        function progress() {
            var prog = ($(".active_question_id").length + 1) / sum;
            var pro = $(".progress").parent().width() * prog;
            $(".progres").text((prog * 100).toString().substr(0, 5) + "%")
            $(".progress").animate({
                width: pro,
                opacity: 0.5
            }, 1000);
        }

        /*保存考题状态 已做答的状态*/
        function saveQuestionState(clickId) {
            showQuestion(clickId)
        }

        $(function () {
            $(".middle-top-left").width($(".middle-top").width() - $(".middle-top-right").width())
            $(".progress-left").width($(".middle-top-left").width() - 200);
            progress();
            answerCard();
            showQuestion(0);

            /*实现进度条信息加载的动画*/
            var str = '';
            /*开启或者停止时间*/
            $(".time-stop").click(function () {
                timeState = false;
                $(this).hide();
                $(".time-start").show();
            });
            $(".time-start").click(function () {
                timeState = true;
                $(this).hide();
                $(".time-stop").show();
            });

            /*答题卡的切换*/
            $("#openCard").click(function () {
                $("#closeCard").show();
                $("#answerCard").slideDown();
                $(this).hide();
            })
            $("#closeCard").click(function () {
                $("#openCard").show();
                $("#answerCard").slideUp();
                $(this).hide();
            })

            //提交试卷
            $("#submitQuestions").click(function () {
                //alert(JSON.stringify(checkQues));

                if ($(".clickQue").length < sum) {
                    alert("已做答:" + ($(".clickQue").length) + "道题,还有" + (sum - ($(".clickQue").length)) + "道题未完成,请做完全部题目后提交");
                } else if ($(".clickQue").length == sum) {
                    //alert(JSON.stringify(checkQues));
                    var index = parent.layer.getFrameIndex(window.name);
                    setTimeout(function () {
                        parent.layer.close(index)
                    }, 1000);
                }
            })
            $("#Question").click(function (source) {
                var id = source.id;
                $("#" + id).find("input").prop("checked", "checked");
                $("#" + id).addClass("clickTrim");
                $("#ques" + activeQuestion).removeClass("question_id").addClass("clickQue");
                var ques = 0;
                var text = 1;
                for (var i = 0; i < checkQues.length; i++) {
                    if (checkQues[i].id == activeQuestion && checkQues[i].item != id) {
                        text = 0;
                        // console.log(subid);
                        // console.log(qno);
                        ques = checkQues[i].id;
                        checkQues[i].item = id;//获取当前考题的选项ID
                        checkQues[i].answer = $("#id1").val();//获取当前考题的选项值
                        if (subid != null) {
                            checkQues[i].subid = subid;
                        } else if (qno != null) {
                            checkQues[i].qno = qno;
                        }
                    }
                }
                if (text) {
                    if (checkQues.length == 0 || Question != activeQuestion && activeQuestion != ques) {
                        var check = {};
                        check.id = activeQuestion;//获取当前考题的编号
                        check.item = id;//获取当前考题的选项ID
                        check.answer = $("#id1").val();//获取当前考题的选项值
                        if (subid != null) {
                            check.subid = subid;
                            checkQues.push(check);
                        } else if (qno != null) {
                            check.qno = qno;
                            checkQues.push(check);
                        }
                    }
                }
                $(".question_info").each(function () {
                    var otherId = $(this).attr("id");
                    if (otherId != id) {
                        $("#" + otherId).find("input").prop("checked", false);
                        $("#" + otherId).removeClass("clickTrim");
                    }
                })
            })
            //进入下一题
            $("#nextQuestion").click(function () {


                if ((activeQuestion + 1) != sum) {
                    showQuestion(activeQuestion + 1);
                } else {
                    showQuestion(activeQuestion)
                    alert("这是最后一题！！！")
                }

            })
        })

    </script>

</head>
<body>

<div>
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="content">
            <div class="row">
                <!--                <form id="frm" action="http://www.baidu.com">-->
                <!--                    考试还剩余  <div id="time"></div>-->
                <!--                </form>-->


                <div class="btn-group">
                    <button class="btn btn-default" type="button" onclick="javascript:window.location.href='select_page.html'">返回上一个页面</button>
                    <button class="btn btn-default" type="button" onClick="location.reload()">刷新</button>
                </div>
            </div>

            <div style="width: 100%;height:auto;display: inline-block;border: 1px solid white;position: relative;margin-top:10px;">
                <div style="width: 100%;">
                    <div style="width: 80%;margin: 0px auto">
                        <div style="width: 100%;height:100px;border: 1px solid #CCC;border-bottom:none;background:#FFF;">
                            <div class="middle-top"
                                 style="width: 100%;height: 50px;border-bottom: 1px solid #CCC;background:#2D3339; position:relative;">
                                <div class="middle-top-left pull-left"
                                     style="height: 100%;padding-left: 20px;;background:#232C31;color:#FFF;">
                                    <div class="text-center pull-left progress-left"
                                         style="border: 1px solid #A2C69A;background:#FFF;border-radius:10px;line-height:20px;height:20px;margin:15px 0px 15px 0px;font-size: 11px;position:relative;">
                                        <div class="progress pull-left"
                                             style="background: #609E53;width: 0px;height:18px;position:absolute;left: 0px;"></div>
                                        <div class="pro-text"
                                             style="left: 0px;color: #609E53;position:absolute;top:0px;width:100%;"> 已完成<span
                                                class="progres"></span></div>
                                    </div>
                                    <div class="pull-left"
                                         style=" width:135px;line-height:20px;height:20px;margin:15px;font-size:15px;">
                                        <!--已做答的数量和考题总数-->
                                        当前第<span class="questioned"></span>题/共<span class="question_sum"></span>题
                                    </div>
                                </div>
                                <div class="middle-top-right text-center pull-left"
                                     style="width:160px; height: 100%;border-left: 1px solid red;position: absolute;right: 0px;">
                                    <div class="stop pull-left" style="width: 50px; height: 100%;padding: 10px;"><a
                                            href="javascript:void(0);" class="text-center" style="color: #FE6547;">
                                        <div class="time-stop glyphicon glyphicon-pause" title="暂停"
                                             style="width:30px;height: 30px;line-height:30px; border-radius:15px;border: 1px solid #FE6547;"></div>
                                        <div class="time-start glyphicon glyphicon-play" title="开始"
                                             style="width:30px;height: 30px;line-height:30px;border-radius:15px;border: 1px solid #FE6547;display:none;"></div>
                                    </a></div>
                                    <div class="pull-left"
                                         style="width: 100px; height: 100%;padding: 10px 0px 10px 0px;">
                                        <div class="time"
                                             style="width:100px;height: 30px;line-height:30px; border-radius:15px;font-size:20px;color:#FFF;"></div>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%;height: 50px;font-size:15px;color: #000;line-height: 50px;padding-left: 20px;">
                                <div style="color:#FFF;background: red;width: 22px;height: 22px;border-radius:11px;line-height:22px;font-size:13px; text-align: center;"
                                     class="glyphicon glyphicon-map-marker"></div>
                                <!--                                <input type="text"  readonly="true" name="email" placeholder="单选题"  value="" class="layui-input">-->
                                [单选题，判断题，填空题，主观题]
                            </div>
                        </div>
                        <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-bottom:1px dashed #CCC;background:#FFF;">
                            <div style="width: 100%;height: 90%;padding:20px 20px 0px 20px;">
                                <!--试题区域-->
                                <ul class="list-unstyled question" id="" name="">
                                    <li class="question_title"></li>
                                </ul>
                                <!--考题的操作区域-->
                                <div class="operation" style="margin-top: 20px;">
                                    <!--                                    <div class="text-left"-->
                                    <!--                                         style="margin-left:20px;font-size: 15px;float: left;line-height: 30px;">-->
                                    <!--                                        <div id="unHeart" style="color:#999999;"> <span class="glyphicon glyphicon-heart-empty"></span> <span>收藏本题</span> </div>-->
                                    <!--                                        <div id="heart" style="color:#C40000;display: none;"> <span class="glyphicon glyphicon-heart"></span> <span>已收藏</span> </div>-->
                                    <!--                                    </div>-->
                                    <div class="text-right" style="margin-right: 20px;">
                                        <div class="form-group" style="color: #FFF;">
                                            <button class="btn btn-success" id="submitQuestions">提交试卷</button>
                                            <button class="btn btn-info" id="Question">保存</button>
                                            <button class="btn btn-info" id="nextQuestion">下一题</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-top:none;background:#FFF;">
                            <div style="width: 100%;padding:20px;">
                                <div class="panel-default">
                                    <div class="panel-heading" class="panel-heading" id="closeCard"
                                         style="color: #DCE4EC;font-size: 15px;display: none;background: none;">
                                        <span>收起答题卡</span> <span class="glyphicon glyphicon-chevron-up"></span></div>
                                    <div class="panel-heading" id="openCard" style="font-size: 15px;background: none;">
                                        <span>展开答题卡</span> <span class="glyphicon glyphicon-chevron-down"></span></div>
                                    <div id="answerCard" style="display: none;">
                                        <div class="panel-body form-horizontal" style="padding: 0px;">
                                            <ul class="list-unstyled">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-1"></div>
</div>

</body>
</html>
